@import "material-variables";
//@import "variables";
//@import "mixins";
@import "mixins-compat";
//@import "common";
@import "material-layout";
//@import "layout";


// Responsive attributes
// ------------------------------

// hide means hide everywhere
/* Sizes:
  0    <- size < 600  Phone
  600  <- size < 960  Tablet
  960  <- size < 1200 Tablet-Landscape
  1200 <- size         PC
*/

.layout, .layout-column, .layout-row {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 0;
}

.layout-column {
  @include column();
}

.layout-row {
  @include row();
}

.layout-padding > .flex-sm,
.layout-padding > .flex-lt-md
{
  padding: $layout-gutter-width / 4;
}
.layout-padding,
.layout-padding > .flex,
.layout-padding > .flex-gt-sm,
.layout-padding > .flex-md,
.layout-padding > .flex-lt-lg
{
  padding: $layout-gutter-width / 2;
}
.layout-padding > .flex-gt-md,
.layout-padding > .flex-lg
{
  padding: $layout-gutter-width / 1;
}


.layout-margin > .flex-sm,
.layout-margin > .flex-lt-md
{
  margin: $layout-gutter-width / 4;
}
.layout-margin,
.layout-margin > .flex,
.layout-margin > .flex-gt-sm,
.layout-margin > .flex-md,
.layout-margin > .flex-lt-lg {
  margin: $layout-gutter-width / 2;
}
.layout-margin > .flex-gt-md,
.layout-margin > .flex-lg
{
  margin: $layout-gutter-width / 1;
}



.layout-wrap {
  flex-wrap: wrap;
}

.layout-fill {
  margin: 0;
  min-height: 100%;
  width: 100%;
}
@-moz-document url-prefix() {
  .layout-fill {
    margin: 0;
    width: 100%;
    min-height: auto;
    height: inherit;
  }
}

@mixin flex-order-for-name($suffix: null) {
  $selector: 'flex-order';
  @if $suffix != null {
    $selector: 'flex-order-#{$suffix}';
  }
  .#{$selector}-0 { order: 0; }
  .#{$selector}-1 { order: 1; }
  .#{$selector}-2 { order: 2; }
  .#{$selector}-3 { order: 3; }
  .#{$selector}-4 { order: 4; }
  .#{$selector}-5 { order: 5; }
  .#{$selector}-6 { order: 6; }
  .#{$selector}-7 { order: 7; }
  .#{$selector}-8 { order: 8; }
  .#{$selector}-9 { order: 9; }
}

@mixin layout-for-name($name) {
  .layout-#{$name} {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 0;
  }
  .layout-#{$name}-column {
    @include column();
  }
  .layout-#{$name}-row {
    @include row();
  }
}

@mixin offset-for-name($name: null) {
  $offsetName: 'offset';
  @if $name != null {
    $offsetName: 'offset-#{$name}';
  }
  @for $i from 1 through 19 {
    .#{$offsetName}-#{$i * 5} {
      margin-left: #{$i * 5 + '%'};
    }
  }
  .#{$offsetName}-33, .#{$offsetName}-34 {
    margin-left: 33.33%;
  }
  .#{$offsetName}-66, .#{$offsetName}-67 {
    margin-left: 66.66%;
  }
}

@mixin flex-properties-for-name($name: null) {
  $flexName: 'flex';
  @if $name != null {
    $flexName: 'flex-#{$name}';
  }

  .#{$flexName} {
    box-sizing: border-box;
    @include flex();
  }


  // (0-20) * 5 - 0-100%
  @for $i from 0 through 20 {
    .#{$flexName}-#{$i * 5} {
      @include flex(0 0 #{$i * 5 + '%'});
    }
    .layout-row > .#{$flexName}-#{$i * 5} {
      max-width: #{$i * 5 + '%'};
    }
    .layout-column > .#{$flexName}-#{$i * 5} {
      max-height: #{$i * 5 + '%'};
    }
  }

  .#{$flexName}-33, .#{$flexName}-34 {
    @include flex(0 0 33.33%);
  }
  .#{$flexName}-66, .#{$flexName}-67 {
    @include flex(0 0 66.66%);
  }

  .layout-row {
    > .#{$flexName}-33, > .#{$flexName}-34 {
      max-width: 33.33%;
    }
    > .#{$flexName}-66, > .#{$flexName}-67 {
      max-width: 66.66%;
    }
  }
  .layout-column {
    > .#{$flexName}-33, > .#{$flexName}-34 {
      max-height: 33.33%;
    }
    > .#{$flexName}-66, > .#{$flexName}-67 {
      max-height: 66.66%;
    }
  }
}

// Alignment attributes for layout containers' children
// Arrange on the Main Axis
// center, start, end, space-between, space-around
// flex-start is the default for justify-content
// ------------------------------

@mixin layout-align-for-name($suffix: null) {
  $name: 'layout-align';
  @if $suffix != null {
    $name: 'layout-align-#{$suffix}';
  }

  // Main Axis Center
  .#{$name}-center, //stretch
  .#{$name}-center-center,
  .#{$name}-center-start,
  .#{$name}-center-end {
    @include justify-content(center);
  }

  // Main Axis End
  .#{$name}-end, //stretch
  .#{$name}-end-center,
  .#{$name}-end-start,
  .#{$name}-end-end {
    @include justify-content(flex-end);
  }

  // Main Axis Space Around
  .#{$name}-space-around, //stretch
  .#{$name}-space-around-center,
  .#{$name}-space-around-start,
  .#{$name}-space-around-end {
    @include justify-content(space-around);
  }

  // Main Axis Space Between
  .#{$name}-space-between, //stretch
  .#{$name}-space-between-center,
  .#{$name}-space-between-start,
  .#{$name}-space-between-end {
    @include justify-content(space-between);
  }


  // Arrange on the Cross Axis
  // center, start, end
  // stretch is the default for align-items
  // ------------------------------

  // Cross Axis Center
  .#{$name}-center-center,
  .#{$name}-start-center,
  .#{$name}-end-center,
  .#{$name}-space-between-center,
  .#{$name}-space-around-center {
    @include align-items(center);
  }

  // Cross Axis Start
  .#{$name}-center-start,
  .#{$name}-start-start,
  .#{$name}-end-start,
  .#{$name}-space-between-start,
  .#{$name}-space-around-start {
    @include align-items(flex-start);
  }

  // Cross Axis End
  .#{$name}-center-end,
  .#{$name}-start-end,
  .#{$name}-end-end,
  .#{$name}-space-between-end,
  .#{$name}-space-around-end {
    @include align-items(flex-end);
  }

}

// Flex attributes for layout children
// ------------------------------

@include flex-properties-for-name();
@include layout-align-for-name();
@include flex-order-for-name();
@include offset-for-name();

/**
 * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
 * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
 * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
 */

// SMALL SCREEN
@media (max-width: $layout-breakpoint-sm - 1) {
  .hide-sm, .hide {
    &:not(.show-sm):not(.show) {
      display: none;
    }
  }

  @include flex-order-for-name(sm);
  @include layout-align-for-name(sm);
  @include layout-for-name(sm);
  @include offset-for-name(sm);
  @include flex-properties-for-name(sm);
}

// BIGGER THAN SMALL SCREEN
@media (min-width: $layout-breakpoint-sm) {
  @include flex-order-for-name(gt-sm);
  @include layout-align-for-name(gt-sm);
  @include layout-for-name(gt-sm);
  @include offset-for-name(gt-sm);
  @include flex-properties-for-name(gt-sm);
}

// MEDIUM SCREEN
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
  .hide, .hide-gt-sm {
    &:not(.show-gt-sm):not(.show-md):not(.show) {
      display: none;
    }
  }
  .hide-md:not(.show-md):not(.show) {
    display: none;
  }

  @include flex-order-for-name(md);
  @include layout-align-for-name(md);
  @include layout-for-name(md);
  @include offset-for-name(md);
  @include flex-properties-for-name(md);
}

// BIGGER THAN MEDIUM SCREEN
@media (min-width: $layout-breakpoint-md) {
  @include flex-order-for-name(gt-md);
  @include layout-align-for-name(gt-md);
  @include layout-for-name(gt-md);
  @include offset-for-name(gt-md);
  @include flex-properties-for-name(gt-md);
}

// LARGE SCREEN
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
  .hide, .hide-gt-sm, .hide-gt-md {
    &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
      display: none;
    }
  }
  .hide-lg:not(.show-lg):not(.show) {
    display: none;
  }

  @include flex-order-for-name(lg);
  @include layout-align-for-name(lg);
  @include layout-for-name(lg);
  @include offset-for-name(lg);
  @include flex-properties-for-name(lg);
}

// BIGGER THAN LARGE SCREEN
@media (min-width: $layout-breakpoint-lg) {
  .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
    &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
      display: none;
    }
  }

  @include flex-order-for-name(gt-lg);
  @include layout-align-for-name(gt-lg);
  @include layout-for-name(gt-lg);
  @include offset-for-name(gt-lg);
  @include flex-properties-for-name(gt-lg);
}
